@workerdeck/ui 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/{SessionPanel-NQ8ksCfj.mjs → SessionPanel-CKQa4i0Y.mjs} +113 -110
- package/build/SessionPanel-CKQa4i0Y.mjs.map +1 -0
- package/build/{SessionPanel-Dy9lQrOV.d.mts → SessionPanel-CZMA44NM.d.mts} +30 -1
- package/build/index.d.mts +66 -7
- package/build/index.mjs +283 -152
- package/build/index.mjs.map +1 -1
- package/build/workspace.d.mts +9 -1
- package/build/workspace.mjs +4 -2
- package/build/workspace.mjs.map +1 -1
- package/package.json +4 -4
- package/src/components/agent/Composer.tsx +18 -10
- package/src/components/agent/EngineIcon.tsx +97 -0
- package/src/components/agent/Loader.tsx +4 -1
- package/src/components/agent/Message.tsx +10 -6
- package/src/components/agent/QuestionPrompt.tsx +1 -1
- package/src/components/agent/SessionBrowser.tsx +235 -117
- package/src/components/agent/SessionPanel.tsx +61 -13
- package/src/components/agent/SessionWorkspace.tsx +10 -0
- package/src/components/agent/StatusBar.tsx +9 -2
- package/src/components/agent/Transcript.tsx +2 -3
- package/src/components/agent/line-prompt.tsx +2 -2
- package/src/components/ui/Menu.tsx +1 -1
- package/src/components/ui/Select.tsx +1 -1
- package/src/components/ui/Tooltip.tsx +1 -1
- package/src/index.ts +9 -1
- package/src/styles/theme.css +45 -15
- package/build/SessionPanel-NQ8ksCfj.mjs.map +0 -1
|
@@ -134,7 +134,7 @@ const SelectContent = ({ className, align = "start", alignItemWithTrigger = fals
|
|
|
134
134
|
alignItemWithTrigger,
|
|
135
135
|
side,
|
|
136
136
|
sideOffset,
|
|
137
|
-
className: "isolate z-
|
|
137
|
+
className: "isolate z-80 outline-none",
|
|
138
138
|
children: /* @__PURE__ */ jsx(Select.Popup, {
|
|
139
139
|
"data-slot": "select-content",
|
|
140
140
|
className: cn("max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto", "rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", className),
|
|
@@ -161,7 +161,7 @@ const MenuContent = ({ className, align = "end", side = "bottom", sideOffset = 6
|
|
|
161
161
|
align,
|
|
162
162
|
side,
|
|
163
163
|
sideOffset,
|
|
164
|
-
className: "isolate z-
|
|
164
|
+
className: "isolate z-80 outline-none",
|
|
165
165
|
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
166
166
|
"data-slot": "menu-content",
|
|
167
167
|
className: cn("min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none", "transition-[opacity,transform] duration-(--motion-base)", "data-starting-style:scale-95 data-starting-style:opacity-0", "data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
@@ -239,7 +239,7 @@ const TooltipProvider = Tooltip.Provider;
|
|
|
239
239
|
const TooltipContent = ({ className, side = "top", sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
|
|
240
240
|
side,
|
|
241
241
|
sideOffset,
|
|
242
|
-
className: "isolate z-
|
|
242
|
+
className: "isolate z-90",
|
|
243
243
|
children: /* @__PURE__ */ jsx(Tooltip.Popup, {
|
|
244
244
|
"data-slot": "tooltip-content",
|
|
245
245
|
className: cn("rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none", className),
|
|
@@ -4280,6 +4280,78 @@ function hashtagTrigger(opts = {}) {
|
|
|
4280
4280
|
};
|
|
4281
4281
|
}
|
|
4282
4282
|
//#endregion
|
|
4283
|
+
//#region src/components/agent/transcript-variant.tsx
|
|
4284
|
+
const VariantContext = createContext("cards");
|
|
4285
|
+
function TranscriptVariantProvider({ value, children }) {
|
|
4286
|
+
return /* @__PURE__ */ jsx(VariantContext.Provider, {
|
|
4287
|
+
value,
|
|
4288
|
+
children
|
|
4289
|
+
});
|
|
4290
|
+
}
|
|
4291
|
+
function useTranscriptVariant() {
|
|
4292
|
+
return useContext(VariantContext);
|
|
4293
|
+
}
|
|
4294
|
+
/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
|
|
4295
|
+
function useLines() {
|
|
4296
|
+
return useTranscriptVariant() === "lines";
|
|
4297
|
+
}
|
|
4298
|
+
const DensityContext = createContext("comfortable");
|
|
4299
|
+
function TranscriptDensityProvider({ value, children }) {
|
|
4300
|
+
return /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
4301
|
+
value,
|
|
4302
|
+
children
|
|
4303
|
+
});
|
|
4304
|
+
}
|
|
4305
|
+
function useTranscriptDensity() {
|
|
4306
|
+
return useContext(DensityContext);
|
|
4307
|
+
}
|
|
4308
|
+
/**
|
|
4309
|
+
* The gap between two rows, per variant and density — the whole of the density
|
|
4310
|
+
* feature, since it is the only vertical spacing between rows that exists.
|
|
4311
|
+
*
|
|
4312
|
+
* `className` goes on the **measured** wrapper (see `Transcript`), so the gap is
|
|
4313
|
+
* part of each row's measured height and no pixel constant is load-bearing.
|
|
4314
|
+
* `px` is fed to `estimateSize` alone, where being approximate is the contract:
|
|
4315
|
+
* it sets the scrollbar's length before rows mount and is replaced by a real
|
|
4316
|
+
* measurement the moment one does.
|
|
4317
|
+
*
|
|
4318
|
+
* `lines` + `compact` is the only combination with no gap at all: there the
|
|
4319
|
+
* row's own `py-0.5` is the entire separation, which is what makes it compact.
|
|
4320
|
+
*/
|
|
4321
|
+
const ROW_GAP = {
|
|
4322
|
+
cards: {
|
|
4323
|
+
comfortable: {
|
|
4324
|
+
className: "pt-4",
|
|
4325
|
+
px: 16
|
|
4326
|
+
},
|
|
4327
|
+
compact: {
|
|
4328
|
+
className: "pt-2",
|
|
4329
|
+
px: 8
|
|
4330
|
+
}
|
|
4331
|
+
},
|
|
4332
|
+
lines: {
|
|
4333
|
+
comfortable: {
|
|
4334
|
+
className: "pt-4",
|
|
4335
|
+
px: 16
|
|
4336
|
+
},
|
|
4337
|
+
compact: { px: 0 }
|
|
4338
|
+
}
|
|
4339
|
+
};
|
|
4340
|
+
/**
|
|
4341
|
+
* The left gutter of a line item: one glyph, fixed width, so every row's text
|
|
4342
|
+
* starts on the same column no matter which kind of event it is. Decorative —
|
|
4343
|
+
* the row's own text says what it is.
|
|
4344
|
+
*/
|
|
4345
|
+
function LineGlyph({ children, className }) {
|
|
4346
|
+
return /* @__PURE__ */ jsx("span", {
|
|
4347
|
+
"aria-hidden": true,
|
|
4348
|
+
className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
|
|
4349
|
+
children
|
|
4350
|
+
});
|
|
4351
|
+
}
|
|
4352
|
+
/** Body text metrics for a line item — tighter than the card variant's. */
|
|
4353
|
+
const LINE_TEXT = "text-body-sm leading-5";
|
|
4354
|
+
//#endregion
|
|
4283
4355
|
//#region src/components/agent/Composer.tsx
|
|
4284
4356
|
/** CLI names may carry display annotations (e.g. "foo (MCP)") the parser rejects. */
|
|
4285
4357
|
const cleanName = (name) => name.replace(/\s*\(MCP\)$/i, "");
|
|
@@ -4332,6 +4404,7 @@ function matchScore(query, haystacks) {
|
|
|
4332
4404
|
*/
|
|
4333
4405
|
function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message the agent…", commands, skills, onSearchFiles, attachments, toolbar, layout = "stacked", className, ref }) {
|
|
4334
4406
|
const inline = layout === "inline";
|
|
4407
|
+
const lines = useLines();
|
|
4335
4408
|
const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState();
|
|
4336
4409
|
const fileInput = useRef(null);
|
|
4337
4410
|
const [dragging, setDragging] = useState(false);
|
|
@@ -4509,7 +4582,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
|
|
|
4509
4582
|
setDragging(false);
|
|
4510
4583
|
pick(e.dataTransfer.files);
|
|
4511
4584
|
},
|
|
4512
|
-
className: cn("mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden
|
|
4585
|
+
className: cn("mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden border border-border bg-bg", "transition-colors", lines ? "rounded-sm focus-within:border-accent" : cn("rounded-lg shadow-(--shadow-xs)", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"), dragging && (lines ? "border-accent" : "border-ring ring-2 ring-ring/30"), disabled && "opacity-60"),
|
|
4513
4586
|
children: [staged.length > 0 && attachments ? /* @__PURE__ */ jsx(AttachmentStrip, { attachments }) : null, inline ? /* @__PURE__ */ jsxs("div", {
|
|
4514
4587
|
className: "flex items-end gap-1 p-1",
|
|
4515
4588
|
children: [
|
|
@@ -4562,11 +4635,7 @@ function Composer({ onSend, onInterrupt, busy, disabled, placeholder = "Message
|
|
|
4562
4635
|
children: /* @__PURE__ */ jsx(X, { className: "size-3" })
|
|
4563
4636
|
})
|
|
4564
4637
|
]
|
|
4565
|
-
}) :
|
|
4566
|
-
"data-slot": "composer-hint",
|
|
4567
|
-
className: "mx-auto mt-1 w-full max-w-[var(--wd-content-max-w,48rem)] text-center text-label text-fg-4",
|
|
4568
|
-
children: "Enter to send · Shift+Enter for a new line"
|
|
4569
|
-
})]
|
|
4638
|
+
}) : null]
|
|
4570
4639
|
});
|
|
4571
4640
|
}
|
|
4572
4641
|
/**
|
|
@@ -5557,78 +5626,6 @@ function isMutatingTool(toolName) {
|
|
|
5557
5626
|
}
|
|
5558
5627
|
}
|
|
5559
5628
|
//#endregion
|
|
5560
|
-
//#region src/components/agent/transcript-variant.tsx
|
|
5561
|
-
const VariantContext = createContext("cards");
|
|
5562
|
-
function TranscriptVariantProvider({ value, children }) {
|
|
5563
|
-
return /* @__PURE__ */ jsx(VariantContext.Provider, {
|
|
5564
|
-
value,
|
|
5565
|
-
children
|
|
5566
|
-
});
|
|
5567
|
-
}
|
|
5568
|
-
function useTranscriptVariant() {
|
|
5569
|
-
return useContext(VariantContext);
|
|
5570
|
-
}
|
|
5571
|
-
/** True in `lines`, for the many `cond ? a : b` reads in the row components. */
|
|
5572
|
-
function useLines() {
|
|
5573
|
-
return useTranscriptVariant() === "lines";
|
|
5574
|
-
}
|
|
5575
|
-
const DensityContext = createContext("comfortable");
|
|
5576
|
-
function TranscriptDensityProvider({ value, children }) {
|
|
5577
|
-
return /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
5578
|
-
value,
|
|
5579
|
-
children
|
|
5580
|
-
});
|
|
5581
|
-
}
|
|
5582
|
-
function useTranscriptDensity() {
|
|
5583
|
-
return useContext(DensityContext);
|
|
5584
|
-
}
|
|
5585
|
-
/**
|
|
5586
|
-
* The gap between two rows, per variant and density — the whole of the density
|
|
5587
|
-
* feature, since it is the only vertical spacing between rows that exists.
|
|
5588
|
-
*
|
|
5589
|
-
* `className` goes on the **measured** wrapper (see `Transcript`), so the gap is
|
|
5590
|
-
* part of each row's measured height and no pixel constant is load-bearing.
|
|
5591
|
-
* `px` is fed to `estimateSize` alone, where being approximate is the contract:
|
|
5592
|
-
* it sets the scrollbar's length before rows mount and is replaced by a real
|
|
5593
|
-
* measurement the moment one does.
|
|
5594
|
-
*
|
|
5595
|
-
* `lines` + `compact` is the only combination with no gap at all: there the
|
|
5596
|
-
* row's own `py-0.5` is the entire separation, which is what makes it compact.
|
|
5597
|
-
*/
|
|
5598
|
-
const ROW_GAP = {
|
|
5599
|
-
cards: {
|
|
5600
|
-
comfortable: {
|
|
5601
|
-
className: "pt-4",
|
|
5602
|
-
px: 16
|
|
5603
|
-
},
|
|
5604
|
-
compact: {
|
|
5605
|
-
className: "pt-2",
|
|
5606
|
-
px: 8
|
|
5607
|
-
}
|
|
5608
|
-
},
|
|
5609
|
-
lines: {
|
|
5610
|
-
comfortable: {
|
|
5611
|
-
className: "pt-4",
|
|
5612
|
-
px: 16
|
|
5613
|
-
},
|
|
5614
|
-
compact: { px: 0 }
|
|
5615
|
-
}
|
|
5616
|
-
};
|
|
5617
|
-
/**
|
|
5618
|
-
* The left gutter of a line item: one glyph, fixed width, so every row's text
|
|
5619
|
-
* starts on the same column no matter which kind of event it is. Decorative —
|
|
5620
|
-
* the row's own text says what it is.
|
|
5621
|
-
*/
|
|
5622
|
-
function LineGlyph({ children, className }) {
|
|
5623
|
-
return /* @__PURE__ */ jsx("span", {
|
|
5624
|
-
"aria-hidden": true,
|
|
5625
|
-
className: cn("w-3.5 shrink-0 select-none text-center font-mono text-label leading-5 text-fg-4", className),
|
|
5626
|
-
children
|
|
5627
|
-
});
|
|
5628
|
-
}
|
|
5629
|
-
/** Body text metrics for a line item — tighter than the card variant's. */
|
|
5630
|
-
const LINE_TEXT = "text-body-sm leading-5";
|
|
5631
|
-
//#endregion
|
|
5632
5629
|
//#region src/components/agent/Response.tsx
|
|
5633
5630
|
/**
|
|
5634
5631
|
* Markdown on a terminal's grid.
|
|
@@ -5801,7 +5798,7 @@ function LineOptionList({ options, focused, onFocus, onChoose, active = true, la
|
|
|
5801
5798
|
className: cn("flex w-full items-baseline gap-2 text-left outline-none", isFocused ? "bg-surface-hover" : "hover:bg-surface-hover/60"),
|
|
5802
5799
|
children: [
|
|
5803
5800
|
/* @__PURE__ */ jsx(LineGlyph, {
|
|
5804
|
-
className: isFocused ? "text-
|
|
5801
|
+
className: isFocused ? "text-fg-1" : void 0,
|
|
5805
5802
|
children: isFocused ? "❯" : " "
|
|
5806
5803
|
}),
|
|
5807
5804
|
/* @__PURE__ */ jsx("span", {
|
|
@@ -5841,7 +5838,7 @@ function LineInput({ value, onChange, onSubmit, onCancel, placeholder }) {
|
|
|
5841
5838
|
return /* @__PURE__ */ jsxs("div", {
|
|
5842
5839
|
className: "flex items-baseline gap-2",
|
|
5843
5840
|
children: [/* @__PURE__ */ jsx(LineGlyph, {
|
|
5844
|
-
className: "text-
|
|
5841
|
+
className: "text-fg-3",
|
|
5845
5842
|
children: "›"
|
|
5846
5843
|
}), /* @__PURE__ */ jsx("input", {
|
|
5847
5844
|
autoFocus: true,
|
|
@@ -6259,7 +6256,7 @@ function QuestionPrompt({ request, onAnswer, onDismiss, className }) {
|
|
|
6259
6256
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
6260
6257
|
className: "flex items-baseline gap-2",
|
|
6261
6258
|
children: [/* @__PURE__ */ jsx(LineGlyph, {
|
|
6262
|
-
className: "text-
|
|
6259
|
+
className: "text-fg-3",
|
|
6263
6260
|
children: "?"
|
|
6264
6261
|
}), /* @__PURE__ */ jsxs("span", {
|
|
6265
6262
|
className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-1",
|
|
@@ -6708,7 +6705,7 @@ function Slot({ onClick, hint, children }) {
|
|
|
6708
6705
|
children
|
|
6709
6706
|
});
|
|
6710
6707
|
}
|
|
6711
|
-
function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, className }) {
|
|
6708
|
+
function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, actions, placement = "top", className }) {
|
|
6712
6709
|
const meta = STATUS_META[state.status];
|
|
6713
6710
|
const now = useNow();
|
|
6714
6711
|
const session = state.rateLimits?.five_hour;
|
|
@@ -6716,7 +6713,7 @@ function StatusBar({ state, connected, connection, onOpenStatus, onOpenContext,
|
|
|
6716
6713
|
const link = connection ?? (connected === false ? "reconnecting" : "live");
|
|
6717
6714
|
return /* @__PURE__ */ jsxs("div", {
|
|
6718
6715
|
"data-slot": "status-bar",
|
|
6719
|
-
className: cn("flex items-center gap-2 border-
|
|
6716
|
+
className: cn("flex items-center gap-2 border-border bg-surface px-3 py-1.5", placement === "bottom" ? "border-t" : "border-b", className),
|
|
6720
6717
|
children: [
|
|
6721
6718
|
/* @__PURE__ */ jsx(Slot, {
|
|
6722
6719
|
onClick: onOpenStatus,
|
|
@@ -6975,7 +6972,7 @@ function Loader({ label, startedAt, tokens, className }) {
|
|
|
6975
6972
|
"data-slot": "loader",
|
|
6976
6973
|
className: cn("flex items-baseline gap-2", className),
|
|
6977
6974
|
children: [/* @__PURE__ */ jsx(LineGlyph, {
|
|
6978
|
-
className: "text-accent",
|
|
6975
|
+
className: lines ? "text-fg-3" : "text-accent",
|
|
6979
6976
|
children: pulse
|
|
6980
6977
|
}), /* @__PURE__ */ jsxs("span", {
|
|
6981
6978
|
className: "min-w-0 flex-1 text-body-sm leading-5 text-fg-3",
|
|
@@ -7000,9 +6997,12 @@ function Loader({ label, startedAt, tokens, className }) {
|
|
|
7000
6997
|
/**
|
|
7001
6998
|
* One chat turn row.
|
|
7002
6999
|
*
|
|
7003
|
-
* `cards`: user messages sit
|
|
7004
|
-
* full-width
|
|
7005
|
-
*
|
|
7000
|
+
* `cards`: user messages sit in a bubble, assistant content is flat and
|
|
7001
|
+
* full-width. Both are **left-aligned**: the transcript is a log read top to
|
|
7002
|
+
* bottom, and an editor-shaped host (a full-width session view beside a sessions
|
|
7003
|
+
* rail) has no right edge to anchor to — a bubble drifting right in a 1600px
|
|
7004
|
+
* column separates a prompt from the reply it produced. The bubble alone is
|
|
7005
|
+
* enough to say who spoke.
|
|
7006
7006
|
*
|
|
7007
7007
|
* `lines`: both are left-aligned full-width line items behind a gutter glyph —
|
|
7008
7008
|
* `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
|
|
@@ -7014,10 +7014,10 @@ function Message({ from, className, children, ...props }) {
|
|
|
7014
7014
|
return /* @__PURE__ */ jsx("div", {
|
|
7015
7015
|
"data-slot": "message",
|
|
7016
7016
|
"data-from": from,
|
|
7017
|
-
className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") :
|
|
7017
|
+
className: cn("flex w-full", lines ? cn("flex-row gap-2", from === "user" && "-mx-1 rounded-sm bg-surface px-1") : "flex-col items-start gap-1", className),
|
|
7018
7018
|
...props,
|
|
7019
7019
|
children: lines ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LineGlyph, {
|
|
7020
|
-
className: from === "user" ? "text-
|
|
7020
|
+
className: from === "user" ? "text-fg-2" : "text-fg-3",
|
|
7021
7021
|
children: from === "user" ? "❯" : "●"
|
|
7022
7022
|
}), /* @__PURE__ */ jsx("div", {
|
|
7023
7023
|
className: "flex min-w-0 flex-1 flex-col gap-1",
|
|
@@ -7028,7 +7028,7 @@ function Message({ from, className, children, ...props }) {
|
|
|
7028
7028
|
function MessageContent({ className, ...props }) {
|
|
7029
7029
|
return /* @__PURE__ */ jsx("div", {
|
|
7030
7030
|
"data-slot": "message-content",
|
|
7031
|
-
className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-
|
|
7031
|
+
className: cn("min-w-0", useLines() ? cn("w-full text-fg-1", LINE_TEXT, "in-data-[from=user]:whitespace-pre-wrap") : cn("text-body-sm leading-6 text-fg-1", "in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-bl-sm", "in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2", "in-data-[from=user]:whitespace-pre-wrap", "in-data-[from=assistant]:w-full"), className),
|
|
7032
7032
|
...props
|
|
7033
7033
|
});
|
|
7034
7034
|
}
|
|
@@ -7614,7 +7614,7 @@ function RecapRow({ line, since }) {
|
|
|
7614
7614
|
"data-slot": "recap",
|
|
7615
7615
|
className: "flex items-baseline gap-2 py-0.5",
|
|
7616
7616
|
children: [/* @__PURE__ */ jsx(LineGlyph, {
|
|
7617
|
-
className: "text-
|
|
7617
|
+
className: "text-fg-3",
|
|
7618
7618
|
children: "※"
|
|
7619
7619
|
}), /* @__PURE__ */ jsxs("span", {
|
|
7620
7620
|
className: "min-w-0 flex-1 text-label leading-5 text-fg-3",
|
|
@@ -7710,7 +7710,7 @@ function showLoader(state) {
|
|
|
7710
7710
|
* References only — the bytes are fetched from the gateway. */
|
|
7711
7711
|
function SentAttachments({ attachments, attachmentUrl }) {
|
|
7712
7712
|
return /* @__PURE__ */ jsx("div", {
|
|
7713
|
-
className:
|
|
7713
|
+
className: "mb-1 flex flex-wrap justify-start gap-1.5",
|
|
7714
7714
|
children: attachments.map((attachment) => {
|
|
7715
7715
|
const href = attachmentUrl?.(attachment.id);
|
|
7716
7716
|
return attachment.mediaType.startsWith("image/") && href ? /* @__PURE__ */ jsx("img", {
|
|
@@ -8052,7 +8052,7 @@ const INTERACTIVE = [
|
|
|
8052
8052
|
* the engine name — an absent capability hides the control instead of offering
|
|
8053
8053
|
* one that can only fail.
|
|
8054
8054
|
*/
|
|
8055
|
-
function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, className }) {
|
|
8055
|
+
function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, className }) {
|
|
8056
8056
|
const external = panelSurface === "external";
|
|
8057
8057
|
const statusExternal = statusSurface === "external";
|
|
8058
8058
|
const controlsExternal = controlsSurface === "external";
|
|
@@ -8204,8 +8204,17 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8204
8204
|
] })] });
|
|
8205
8205
|
const menu = external ? null : actionsMenu;
|
|
8206
8206
|
const headerTakesActions = typeof header === "function";
|
|
8207
|
+
const statusBar = statusExternal ? null : /* @__PURE__ */ jsx(StatusBar, {
|
|
8208
|
+
state,
|
|
8209
|
+
connection,
|
|
8210
|
+
placement: statusPlacement,
|
|
8211
|
+
onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
|
|
8212
|
+
onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
|
|
8213
|
+
onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
|
|
8214
|
+
actions: headerTakesActions ? void 0 : menu
|
|
8215
|
+
});
|
|
8207
8216
|
const handleClick = (event) => {
|
|
8208
|
-
if (!focusComposerOnClick) return;
|
|
8217
|
+
if (!focusComposerOnClick || readOnly) return;
|
|
8209
8218
|
if (event.target?.closest(INTERACTIVE)) return;
|
|
8210
8219
|
if (window.getSelection()?.isCollapsed === false) return;
|
|
8211
8220
|
composerRef.current?.focus();
|
|
@@ -8220,14 +8229,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8220
8229
|
className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-bg", className),
|
|
8221
8230
|
children: [
|
|
8222
8231
|
headerTakesActions ? header({ actions: menu }) : header,
|
|
8223
|
-
|
|
8224
|
-
state,
|
|
8225
|
-
connection,
|
|
8226
|
-
onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
|
|
8227
|
-
onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
|
|
8228
|
-
onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
|
|
8229
|
-
actions: headerTakesActions ? void 0 : menu
|
|
8230
|
-
}),
|
|
8232
|
+
statusPlacement === "top" ? statusBar : null,
|
|
8231
8233
|
protocolMismatch !== void 0 ? /* @__PURE__ */ jsxs(Notice, {
|
|
8232
8234
|
level: "warning",
|
|
8233
8235
|
children: [
|
|
@@ -8265,7 +8267,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8265
8267
|
children: [
|
|
8266
8268
|
/* @__PURE__ */ jsx("span", {
|
|
8267
8269
|
"aria-hidden": true,
|
|
8268
|
-
className: "select-none text-accent",
|
|
8270
|
+
className: cn("select-none", transcriptVariant === "lines" ? "text-fg-3" : "text-accent"),
|
|
8269
8271
|
children: "※"
|
|
8270
8272
|
}),
|
|
8271
8273
|
/* @__PURE__ */ jsxs("span", {
|
|
@@ -8292,7 +8294,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8292
8294
|
]
|
|
8293
8295
|
})
|
|
8294
8296
|
}) : null,
|
|
8295
|
-
capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
|
|
8297
|
+
!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? /* @__PURE__ */ jsx("div", {
|
|
8296
8298
|
className: "px-3 pb-2",
|
|
8297
8299
|
children: /* @__PURE__ */ jsx("div", {
|
|
8298
8300
|
className: "mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2",
|
|
@@ -8307,7 +8309,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8307
8309
|
}, request.id))
|
|
8308
8310
|
})
|
|
8309
8311
|
}) : null,
|
|
8310
|
-
/* @__PURE__ */ jsx(Composer, {
|
|
8312
|
+
readOnly ? null : /* @__PURE__ */ jsx(Composer, {
|
|
8311
8313
|
ref: composerRef,
|
|
8312
8314
|
onSend: handleSend,
|
|
8313
8315
|
onInterrupt: interrupt,
|
|
@@ -8334,6 +8336,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
|
|
|
8334
8336
|
disabled: ended
|
|
8335
8337
|
}) : null] })
|
|
8336
8338
|
}),
|
|
8339
|
+
statusPlacement === "bottom" ? statusBar : null,
|
|
8337
8340
|
!external ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
8338
8341
|
/* @__PURE__ */ jsx(SessionInfoDialog, {
|
|
8339
8342
|
state,
|
|
@@ -8469,6 +8472,6 @@ function Notice({ level, onDismiss, children }) {
|
|
|
8469
8472
|
});
|
|
8470
8473
|
}
|
|
8471
8474
|
//#endregion
|
|
8472
|
-
export { Tip as $,
|
|
8475
|
+
export { Tip as $, SkillsDialog as A, commandTrigger as B, isMutatingTool as C, Button as Ct, permissionModeChoices as D, PermissionModeSelect as E, skillPrompt as F, plainTextToSegments as G, mentionTrigger as H, TranscriptDensityProvider as I, Splitter as J, segmentsToPlainText as K, TranscriptVariantProvider as L, HostFilesDialog as M, ContextDialog as N, permissionModeMeta as O, Composer as P, copyText as Q, useTranscriptDensity as R, Response as S, badgeVariants as St, PERMISSION_MODES as T, cn as Tt, usePromptAreaState as U, hashtagTrigger as V, PromptArea as W, Spinner as X, CodeBlock as Y, CopyButton as Z, SessionInfoDialog as _, SelectItemText as _t, SessionEmptyState as a, DialogContent as at, parseUserQuestions as b, Input as bt, Message as c, DialogTrigger as ct, FileCard as d, MenuItem as dt, TooltipContent as et, Conversation as f, MenuSeparator as ft, STATUS_META as g, SelectItem as gt, StatusBar as h, SelectContent as ht, ToolCallCard as i, DialogClose as it, McpDialog as j, ModelSelect as k, MessageContent as l, Menu$1 as lt, ConversationScrollButton as m, Select$1 as mt, UsageDialog as n, Dialog$1 as nt, Reasoning as o, DialogHeader as ot, ConversationContent as p, MenuTrigger as pt, ProgressRing as q, Transcript as r, DialogBody as rt, PromptTokenText as s, DialogRow as st, SessionPanel as t, TooltipProvider as tt, Loader as u, MenuContent as ut, QUESTION_BEHAVIORS as v, SelectTrigger as vt, toolIcon as w, buttonVariants as wt, PermissionPrompt as x, Badge as xt, QuestionPrompt as y, SelectValue as yt, useTranscriptVariant as z };
|
|
8473
8476
|
|
|
8474
|
-
//# sourceMappingURL=SessionPanel-
|
|
8477
|
+
//# sourceMappingURL=SessionPanel-CKQa4i0Y.mjs.map
|